/**
 * Created by wxl on 2016/11/15.
 */
import React,{Component} from 'react';
import $ from 'jquery';
import classNames from 'classnames/bind';
import styles from 'css/components/app';
const cx = classNames.bind(styles);
import WrapListComponent from './../components/WrapListComponent.jsx';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../actions';
import {fromJS} from 'immutable';

const mapStateToProps = state =>{
    return {
        search: state.search.toJS(),
    }
}

const mapDispatchToProps = dispatch =>{
    return {
        actions: bindActionCreators(Actions, dispatch)
    }
}

@connect(mapStateToProps,mapDispatchToProps)
export default class Search extends Component{
   constructor(props,context){
     super(props,context);
     this.handleChange = this.handleChange.bind(this)
     this.state={"list_header_ad":"","card":{},"wraplistData":[],"hotData":[], backArr:[]}

   }
    static fetchData(params){
        return [Actions.getSearchData(params.keyword,0)]
    }

    handleChange(e,option){
        e.preventDefault();
       // const { actions } = this.props
       // actions.getIndexData()
    }

   goBack(){
     history.go(-1);
   }

   componentWillMount(){
     this.setState(
       {
         //"list_header_ad":"//wa.gtimg.com/website/201611/unknown_D_20161101135718.jpg",
         //"list_right_ad":"http://img1.gtimg.com/ninja/2/2016/11/ninja147925726284341.jpg"
           "list_header_ad":"",
           "list_right_ad":""

       });
        var wraplistData=[];
        this.props.search.searchData.forEach(function(e,index){
          wraplistData.push({url:"detail/"+e.id,images:e.cover,commentCount:e.comment,title:e.title});
        });
        this.setState({"wraplistData":wraplistData})
    }
    componentDidMount(){
        window.removeEventListener('scroll', this.handleScroll.bind(this));
        window.addEventListener('scroll', this.handleScroll.bind(this));

    }

    handleScroll(e) {
        //加载更多scroll处理
        var a = document.documentElement.clientHeight;
        var c = document.documentElement.scrollHeight;
        var b = document.documentElement.scrollTop + document.body.scrollTop;
        if (navigator.onLine){
            if ( b >= (c - a)) {
                //加载更多数据，然后实现
                console.log("滚动啦~~~");
                this.getWrapListDataMore();
            }
        }else{
            console.log('网络异常，请检查是否联网');
        }
    }
   getWrapListDataMore(){
       this.props.actions.getSearchData(this.props.params.keyword,this.props.search.start)
       var wraplistData=[];
       this.props.search.searchData.forEach(function(e,index){
               wraplistData.push({url:"/detail/"+e.id,images:e.cover,commentCount:e.comment,title:e.title});
      });
       this.setState({"wraplistData":wraplistData})
   }

   goTop(){
     var time = setInterval(function () {
       document.body.scrollTop = document.body.scrollTop - 50;
       if (document.body.scrollTop === 0) {
         clearInterval(time);
       }
     }, 1);
   }
   render(){
       const { actions, search} = this.props;

       return (
           <div className={cx("main-body")}>
               <div  className={cx("detail-bar")}>
                   <div onClick={()=>this.goBack()}>
                       <svg viewBox="0 0 24 24" className={cx("back-btn")}>
                           <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
                       </svg>
                   </div>
               </div>

               <div  className={cx("list-left")}>
                   <div  className={cx("major")} style={{marginTop:"10px"}}>
                       <div  className={cx("hot-title")}>搜索结果：</div>
                       {
                           this.state.wraplistData.length>0? this.state.wraplistData.map(function(item,index){
                               return (
                                   <WrapListComponent  data={item} key={'wraplist_'+index}/>
                               )
                           }):<div className={cx("noMore")}>暂无数据</div>
                       }

                   </div>

               </div>
               <div className={cx("list-right")}>
                   {
                       this.state.hotData.length>0?[
                           <div className={cx("hot-list")}>
                               <div className={cx("hot-title")}>热门排行榜</div>
                               <ul>
                                   {
                                       this.state.hotData.map(function(item,index){
                                           return (
                                               <li key={'hot_list'+index}>
                                                   <p className={cx(index<3?'hot-list-title hot-list-title-active':'hot-list-title')} name={index+1} >{item.title}</p>
                                               </li>
                                           )
                                       })
                                   }

                               </ul>
                           </div>
                       ]:null
                   }

                   {
                       this.state.list_right_ad?[
                           <div className={cx("list-right-ad")}>
                               <img src={this.state.list_right_ad} width="300"/>
                           </div>
                       ]:null
                   }
               </div>

               <div className={cx("aScroll")} onClick={()=>this.goTop()}></div>
           </div>

       )
   }
}

